<template>
  <div class="address_body">
    <view class="no_address" v-if="addressObjects.length == 0">
      暂时没有地址
      <br />
      点击右上角添加一个
    </view>

    <u-card :head-style="cardClass" :title="title" :title-color="`#fff`" v-else>
      <view class="" slot="body">
        <view
          class="u-body-item u-flex u-border-bottom just-content-around"
          v-for="addressObject in addressObjects"
          :key="addressObject.id"
          @tap="handlerTapAddress(addressObject)"
        >
          <view class="add_info left">
            <view class="address">{{ addressObject.detailAddress }}</view>
            <view class="member">
              <text class="mr-20">{{ addressObject.name }}</text>
              <text>{{ addressObject.phone }}</text>
            </view>
          </view>
          <view class="right">
            <view
              class="tabTitle tabTitleRight"
              @tap="handlerTapEdit(addressObject)"
            >
              <u-icon name="edit-pen" size="40"></u-icon>
            </view>
          </view>
        </view>

        <!-- <view
          class="title u-body-item u-flex u-border-bottom just-content-around"
        >
          <view class="left">
            <view class="tabTitle">管理现有地址</view>
          </view>
          <view class="right">
            <view class="tabTitle tabTitleRight">新增新地址</view>
          </view>
        </view> -->
      </view>
    </u-card>

    <u-no-network></u-no-network>
  </div>
</template>

<script>
import { mapMutations, mapGetter, mapState } from "vuex";

export default {
  data() {
    return {
      title: "现有收货地址",
      cardClass: {
        "background-image": "linear-gradient(45deg,blue,#fff)",
        display: "none",
      },
      addressObjects: [],
      addressObjectTemp: {},
      // edit:false,
    };
  },

  async onLoad() {
    console.log("address page onload.");
    await this.init();
  },

  onShow(){
    // 处理重新进入页面的刷新
    this.init();
  },

  onNavigationBarButtonTap(e) {
    uni.navigateTo({
      url: "./newaddress",
    });
  },

  async onPullDownRefresh() {
    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
    console.log("refresh");
    // 获取用户id
    await this.init();
    uni.stopPullDownRefresh(); //停止下拉刷新动画
  },

  methods: {
    ...mapMutations(['SET_USER_ADDRESS']),
    async init() {
      let that = this;
      let _address = await that.$u.api.getUserAddressAll();
      that.addressObjects = _address;
      that.$store.commit('SET_USER_ADDRESS',_address)
    },

    handlerTapEdit(object) {
      let that = this;
      that.addressObjectTemp = JSON.parse(JSON.stringify({ ...object }));

      // console.log(that.addressObjectTemp);

      uni.navigateTo({
        url: "./newaddress?addId=" + that.addressObjectTemp.id,
      });
    },

    handlerTapAddress(object){
      let that = this;
      

    }

  },
};
</script>

<style lang="scss">
.no_address {
  font-size: $uni-font-size-lg;
  color: $uni-text-color-grey;
  text-align: center;
  padding-top: 20rpx;
}
.tabs {
  background-image: linear-gradient(45deg, blue, #fff);
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 0px;
}

.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx 10rpx;
  justify-content: space-between;

  .left {
    font-size: $uni-font-size-sm;
    .address {
      font-size: $uni-font-size-base;
      font-weight: bold;
    }
  }
  .right {
    font-size: $uni-font-size-sm;
    display: flex;
    justify-content: center;
    align-content: center;
    .place_holder {
      color: $uni-text-color-grey;
      margin-right: 10rpx;
    }
  }
}
</style>